<template>
  <div id="container" style="width: 100%; height: 100vh"></div>
</template>

<script setup>
import { onMounted } from "vue";

// 判断浏览器是否支持Canvas
function isSupportCanvas() {
  const elem = document.createElement("canvas");
  return !!(elem.getContext && elem.getContext("2d"));
}

onMounted(() => {
  if (!isSupportCanvas()) {
    alert(
        "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~"
    );
    return;
  }

  // 创建地图实例
  const map = new window.AMap.Map("container", {
    resizeEnable: true,
    center: [116.418261, 39.921984], // 设置地图中心点为北京
    zoom: 11, // 设置缩放级别
  });

  // 加载热力图插件
  map.plugin(["AMap.HeatMap"], function () {
    // 初始化热力图对象
    const heatmap = new window.AMap.HeatMap(map, {
      radius: 25, // 设置热力图的半径
      opacity: [0, 0.8], // 设置热力图的透明度
    });

    // 设置数据集
    const heatmapData = [

      {
        lng: 116.408531,
        lat: 39.953194,
        count: 75,
      },
      {
        lng: 116.417916,
        lat: 39.954029,
        count: 76,
      },
      {
        lng: 116.412215,
        lat: 39.992282,
        count: 77,
      },
      {
        lng: 116.181532,
        lat: 40.048762,
        count: 78,
      },
      {
        lng: 116.434848,
        lat: 40.070463,
        count: 79,
      },
      {
        lng: 116.385039,
        lat: 39.956937,
        count: 80,
      },
      {
        lng: 116.755067,
        lat: 39.854499,
        count: 81,
      },
      {
        lng: 116.396061,
        lat: 39.912841,
        count: 82,
      },

      { lng: 116.191031, lat: 39.988585, count: 10 },
      { lng: 116.389275, lat: 39.925818, count: 11 },
      { lng: 116.287444, lat: 39.810742, count: 12 },
      { lng: 116.481707, lat: 39.940089, count: 13 },
      { lng: 116.410588, lat: 39.880172, count: 14 },
      { lng: 116.394816, lat: 39.91181, count: 15 },
      { lng: 116.416002, lat: 39.952917, count: 16 },
    ]
    if (!heatmap){
      console.log("热力图初始化异常")
    }
    // 设置热力图数据集
    heatmap.setDataSet({
      data: heatmapData,
      max: 100,
    });
  });
});
</script>

<style scoped>
#container {
  height: 100vh;
}
</style>